<template>
    <admin-view>
        <admin-section>
            <admin-card>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <div class="name">
                            <div class="avatar">
                                <img :src="user.avatar"/>
                            </div>
                            <div class="info">
                                <el-row>
                                    <label>{{user.name}}</label>
                                </el-row>
                                <el-row>
                                    <label class="star-id">{{user.uid}}</label>
                                </el-row>
                            </div>
                        </div>
                        <div class="details">
                            <el-form label-width="80px" label-position="left" size="mini">
                                <el-form-item label="大本命">
                                    <div v-if="user.followed">
                                        <admin-entity-info
                                            type="star"
                                            :name="user.star_name"
                                            :id="user.star_id"
                                            :avatar="user.star_avatar"
                                        >

                                        </admin-entity-info>
                                    </div>
                                    <div v-if="!user.followed">
                                        未设置大本命
                                    </div>
                                </el-form-item>
                                <el-form-item
                                    label="粉丝站"
                                >
                                    <div v-if="user.is_club_manager">
                                        <admin-entity-info
                                                type="club"
                                                :name="user.club_name"
                                                :id="user.club_id">
                                        </admin-entity-info>

                                    </div>
                                    <div v-else>
                                        -
                                    </div>


                                </el-form-item>

                            </el-form>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <h2>暂无功能</h2>
                    </el-col>
                </el-row>
            </admin-card>
        </admin-section>
    </admin-view>

</template>
<style lang="scss" scoped>

    .info {
        img {
            position: relative;
            display: inline-block;
            width: 270px;
            height: 180px;
            vertical-align: center;

        }

        padding-top: 12px;
    }

    .details {

        .el-form-item {
            margin: 0px;
        }
        padding-left: 10px;
    }
    .name {
        display: flex;
        flex-direction: row;
        padding: 10px;
        label {
            padding: 10px 10px 10px 10px;
            font-size: 18px;
        }

        .star-id {
            color: gray;
            font-size: 10px;
            font-family: "Courier New";
        }
        .avatar {

            img {
                position: relative;
                display: inline-block;
                width: 60px;
                height: 60px;
                /*圆形显示*/
                border-radius: 50%;
                /*圆形显示*/
                background: rgba(255, 255, 255, 0.1);
                vertical-align: center;
                border: 2px solid gray;
            }
        }
    }
</style>
<script lang="ts">

    import {Vue, Component, Watch} from 'vue-property-decorator'
    import {AdminView,AdminCard,AdminLabel,AdminSection} from '../layout'
    import AdminEntityInfo from '../controls/AdminEntityInfo'

    import {Api} from "@/api/user";
    import AdminView from "../layout/AdminView";
    import AdminSection from "../layout/AdminSection";
    import AdminCard from "../layout/AdminCard";
    @Component({
        name: 'AdminUserView',
        components: {
            AdminCard,
            AdminSection,
            AdminView,
            AdminLabel,
            AdminEntityInfo

        },
    })
    export default class AdminUserView extends Vue {

        user: Api.User.GetUserInfoResponse = {
            name:"",
            avatar:"",
            star_id:"",
            star_name:"",
            star_avatar:"",
            is_club_manager:false,
            club_id:"",
            club_name:"",
            followed:false,
        };

        activeName: string = '';

        onClickImage() {
            let img: any = this.$refs['image'];

            img.click()
        }

        loadView() {
            Api.User.GetUserInfo({uid: this.$route.params['id']})
                .then((ack) => {
                    this.user = ack;
                });
        }


        @Watch('$route.params.id')
        onIDChange(oldVal:any, newVal:any) {
            this.loadView()

        }

        @Watch('activeName')
        onNameChange() {
            this.$local.SetAttribute("stars.active", this.activeName)
        }

        mounted() {

            this.activeName = this.$local.GetAttribute('stars.active', this.activeName);
            this.loadView()
        }
    }
</script>

<style scoped>

</style>